<template>
  <div class="container">
    <el-card shadow="never">
      <div class="head flex flex-ai-c">
        <div class="fs-16 bold">{{ detail.serveCompanyName }}</div>
        <div class="fs-12 fc-lightgray mg-l-16">覆盖时间：</div>
        <div class="fs-12">{{ startTime }} - {{endTime}}</div>
      </div>
      <div class="body mg-t-20">
        <div class="flex mg-b-12">
          <div class="w-200">
            <span class="fc-lightgray">发薪单数：</span>
            <span class="bold">{{ setDefault(detail.payOrderCount) }}</span>
          </div>
          <div class="w-200">
            <span class="fc-lightgray">发薪金额：</span>
            <span class="bold"><span>¥</span>{{ setDefault(detail.payTotalMoney) }}</span>
          </div>
          <div class="flex-1">
            <span class="fc-lightgray">停发金额：</span>
            <span class="bold"><span>¥</span>{{ setDefault(detail.payStopTotalMoney) }}</span>
          </div>
        </div>
        <div class="flex">
          <div class="w-200">
            <span class="fc-lightgray">发薪人数：</span>
            <span class="bold">{{ setDefault(detail.payTotalCount) }}</span>
          </div>
          <div class="w-200">
            <span class="fc-lightgray">待领金额：</span>
            <span class="bold"><span>¥</span>{{ setDefault(detail.payUnclaimedTotalMoney) }}</span>
          </div>
          <div class="flex-1">
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

import { serverCompanyBillInfo } from '@/api/salary'

export default defineComponent({
  components: {},
  props: {
    serveCompanyId: {
      type: [String, Number],
      default: ''
    },
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {}
    }
  },
  watch: {
    serveCompanyId: {
      handler(newval) {
        if (newval) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  computed: {
    setDefault() {
      return (value: string) => {
        return value ?? '0'
      }
    }
  },
  methods: {
    getData() {
      serverCompanyBillInfo({
        serveCompanyId: this.serveCompanyId as any,
        startTime: this.startTime,
        endTime: this.endTime
      }).then((res: any) => {
        this.detail = res || {}
      })
    }
  }
})
</script>

<style scoped lang="stylus">
.body
  background #F7FBFE
  border-radius 6px
  padding 18px 16px
.w-200
  width 200px
.w-300
  width 300px
.fc-lightgray
  color #5E617D
</style>
